<template>
	<view>
		<uni-popup ref="popup" v-if="!infoAuth">
			<template v-if="authShow">
				<view class="popup-content">
					<view class="popup-c-header">
						登录或注册
					</view>
					<form @submit="formSubmit">
						<view class="popup-c-form" :data-weui-theme="theme">
							<view class="popup-c-avatar">
								<button class="" open-type="chooseAvatar" @chooseavatar="chooseavatar">
									<block v-if="uploadAvatar">
										<image class="popup-c-img" :src="uploadAvatar" mode="widthFix"></image>
									</block>
									<block v-else>
										<uni-icons type="plusempty" size="28" color="#000000"></uni-icons>
									</block>
								</button>
							</view>

							<view class="popup-c-input">
								<input type="nickname" name="username" placeholder="设置你的昵称" />
							</view>

							<view class="popup-c-button">
								<button form-type="submit">确认登录</button>
							</view>
						</view>
					</form>
				</view>

				<view class="popup-c-close">
					<view class="popup-c-c_icon" @click="popupClose('info')">
						<uni-icons type="closeempty" color="#fff" size="28"></uni-icons>
					</view>
				</view>
			</template>

		</uni-popup>
		<uni-popup ref="mobilePopup" v-if="!mobileAuth">
			<template v-if="authShow">
				<view class="popup-content">
					<view class="popup-c-header">
						手机号授权
					</view>
					<view class="popup-c-text">
						申请使用你的手机号码
					</view>
					<view class="popup-c-m_btn">
						<button open-type="getPhoneNumber|agreePrivacyAuthorization"
							@getphonenumber="decryptPhoneNumber">确认授权</button>
					</view>
				</view>

				<view class="popup-c-close">
					<view class="popup-c-c_icon" @click="popupClose('mobile')">
						<uni-icons type="closeempty" color="#fff" size="28"></uni-icons>
					</view>
				</view>
			</template>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "authorize",
		emits: ['updateInfo'],
		props: {
			authShow: {
				type: Boolean,
				default: false
			},
			infoAuth: {
				type: Boolean,
				default: true
			},
			mobileAuth: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				domainImgUrl: this.domainUrl + '/assets/img/uniapp/client',
				uploadAvatar: '',
				theme: uni.getSystemInfoSync().theme,
				imgUrl: ''
			};
		},
		created() {
			// this.$nextTick(() => {
			// 	this.$refs.mobilePopup.open('center')
			// })
		},
		methods: {
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			chooseavatar(e) {
				const {
					avatarUrl
				} = e.detail

				this.uploadAvatar = avatarUrl
			},
			popupClose(type) {
				if (type === 'info') {
					this.$refs.popup.close()
				} else if (type === 'mobile') {
					this.$refs.mobilePopup.close()
				}
			},
			formSubmit(e) {
				let _this = this
				const {
					username
				} = e.detail.value

				if (!_this.uploadAvatar) {
					_this.toast('请上传头像')
					return false
				}

				if (!username) {
					_this.toast('请输入昵称')
					return false
				}

				uni.showLoading({
					title: '提交中...',
					mask: true
				})

				uni.uploadFile({
					url: _this.baseUrl + 'common/upload',
					filePath: _this.uploadAvatar,
					name: 'file',
					header: {
						token: uni.getStorageSync('app_token')
					},
					success(res) {
						let result = JSON.parse(res.data);

						_this.saveInfo(username, result.data.url, result.data.fullurl)
					}
				})
			},
			saveInfo(username, avatar, fullAvatar) {
				let _this = this
				_this.$api.post('meet.user/profile', {
					nickname: username,
					avatar: avatar
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.$emit('updateInfo', res.data.userInfo)
						_this.$refs.popup.close()
						if (!res.data.userInfo.mobile) {
							_this.$refs.mobilePopup.open('center')
						}
					} else {
						_this.toast(res.msg);
					}
				}, fail => {
					uni.hideLoading()
				})
			},
			decryptPhoneNumber(e) {
				let _this = this

				const {
					code
				} = e.detail

				uni.showLoading({
					title: '提交中...',
					mask: true
				})

				_this.$api.post('meet.user/decryptPhoneNumber', {
					code: code
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.$emit('updateInfo', res.data.userInfo)
						_this.$refs.mobilePopup.close()
					} else {
						_this.toast(res.msg);
					}
				}, fail => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
	.popup-content {
		min-height: 50px;
		background-color: #fff;
		border-radius: 32rpx;
		overflow: hidden;
		width: 500rpx;
		padding: 50rpx;
	}

	.couponImg {
		width: 500rpx;
		height: 649rpx;
	}

	.couponImg image {
		width: 500rpx;
		height: 649rpx;
	}

	.popup-c-header {
		width: 500rpx;
		height: 128rpx;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 40rpx;
	}

	.popup-c-form {
		text-align: center;
	}

	.popup-c-avatar {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx 0;
	}

	.popup-content .popup-c-avatar button {
		width: 160rpx;
		height: 160rpx;
		background-color: #F0F6FF;
		border-radius: 50%;
		border: 2rpx dashed #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.popup-c-img {
		width: 100%;
		height: 100%;
	}

	.popup-c-input {
		display: flex;
		justify-content: center;
		margin-bottom: 32rpx;
	}

	.popup-c-input input {
		width: 314rpx;
		height: 70rpx;
		background: #F0F6FF;
		border-radius: 222rpx;
		font-size: 22rpx;
	}

	.popup-c-button {
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.popup-c-button button {
		width: 314rpx;
		height: 70rpx;
		background: #000000;
		border-radius: 222rpx;
		color: #fff;
		font-size: 26rpx;
		border: 0;

	}

	.popup-c-button button::after {
		border: 0;
	}

	.popup-c-close {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}

	.popup-c-c_icon {
		border: 6rpx solid #fff;
		border-radius: 50%;
		padding: 6rpx;
	}

	.popup-c-text {
		padding: 0 40rpx 50rpx 40rpx;
		text-align: center;
		color: #6C6C6C;
		font-size: 30rpx;
		line-height: 40rpx;
	}

	.popup-c-m_btn {
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.popup-c-m_btn button {
		width: 314rpx;
		height: 70rpx;
		background: #000000;
		border-radius: 222rpx;
		color: #fff;
		font-size: 26rpx;
		border: 0;
	}

	.popup-c-m_btn button::after {
		border: 0;
	}
</style>